<template>
    <div>
        <el-row :gutter="12">
            <el-col :span="6" class="el-card__body__box1">
                <el-card shadow="hover">
                    <b style="color: #2e2e2e;">安装部报表</b>
                    <div style="margin-top: -10px;margin-bottom: 15px;color: #999; font-size: 16px;">2023年6月水电气缴费记录</div>
                    <div class="test1" style="width:600px;height:150px;">
                        <div id="myChart1" style="width:100%;height:240px;float:left;"></div>
                    </div>
                    <div class="test2" style="width:600px;height:150px;">
                        <div id="myChart2" style="width:100%;height:240px;margin-top:-70px;float:left;"></div>
                    </div>
                    <div class="test3" style="width:600px;height:150px;">
                        <div id="myChart3" style="width:100%;height:240px;margin-top:-70px;float:left;"></div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
  
<script>
import echarts from 'echarts'
export default {
    data() {
        return {
            opinionData1: [
                { value: 42, name: '已缴费' },
                { value: 8, name: '未缴费' },
            ],
            opinionData2: [
                { value: 26, name: '已缴费' },
                { value: 24, name: '未缴费' },
            ],
            opinionData3: [
                { value: 40, name: '已缴费' },
                { value: 10, name: '未缴费' },
            ]
        }
    },
    mounted() {
        this.drawLine1()
        this.drawLine2()
        this.drawLine3()
    },
    methods: {
        drawLine1() {
            this.myChart = this.$echarts.init(document.getElementById('myChart1'))
            this.myChart.setOption({
                title: [
                    {
                        text: '自来水', // 主标题
                        subtext: '已缴', // 副标题
                        x: '45%', // x轴方向对齐方式
                        y: '30%' // y轴方向对齐方式
                    },
                    {
                        text: '84%', // 主标题
                        x: '12%', // x轴方向对齐方式
                        y: '25%', // y轴方向对齐方式
                        textStyle: { // 标题样式
                            fontSize: 36,
                            color: '#6739b6'
                        },
                    },
                    {
                        text: '4324人',
                        x: '45%', // x轴方向对齐方式
                        y: '48%', // y轴方向对齐方式
                        textStyle: { // 标题样式
                            fontSize: 22,
                            color: '#009900'
                        },
                    }
                ],

                tooltip: {
                    formatter: '{a} <br/>{b} : {d}%'
                },
                series: [
                    {
                        name: '自来水',
                        type: 'pie',
                        radius: ['40%', '50%'],
                        center: ['19%', '32%'],
                        itemStyle: {
                            color: function (params) {
                                var colorList = [
                                    {
                                        c1: '#ec008c',
                                        c2: '#6739b6'
                                    },
                                    {
                                        c1: '#ddd',
                                        c2: '#ddd'
                                    },]
                                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                                    offset: 0,
                                    color: colorList[params.dataIndex].c1
                                }, {
                                    offset: 1,
                                    color: colorList[params.dataIndex].c2
                                }])
                            }
                        },

                        data: this.opinionData1
                    }
                ]
            })
        },
        drawLine2() {
            this.myChart = this.$echarts.init(document.getElementById('myChart2'))
            this.myChart.setOption({
                title: [
                    {
                        text: '用电', // 主标题
                        subtext: '已缴', // 副标题
                        x: '45%', // x轴方向对齐方式
                        y: '30%' // y轴方向对齐方式
                    },
                    {
                        text: '52%', // 主标题
                        x: '12%', // x轴方向对齐方式
                        y: '25%', // y轴方向对齐方式
                        textStyle: { // 标题样式
                            fontSize: 36,
                            color: '#ff9700'
                        },
                    },
                    {
                        text: '2324人',
                        x: '45%', // x轴方向对齐方式
                        y: '48%', // y轴方向对齐方式
                        textStyle: { // 标题样式
                            fontSize: 22,
                            color: '#ed1c24'
                        },
                    }
                ],

                tooltip: {
                    formatter: '{a} <br/>{b} : {d}%'
                },
                series: [
                    {
                        name: '自来水',
                        type: 'pie',
                        radius: ['40%', '50%'],
                        center: ['19%', '32%'],
                        itemStyle: {
                            color: function (params) {
                                var colorList = [
                                    {
                                        c1: '#ff9700',
                                        c2: '#ed1c24'
                                    },
                                    {
                                        c1: '#ddd',
                                        c2: '#ddd'
                                    },]
                                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                                    offset: 0,
                                    color: colorList[params.dataIndex].c1
                                }, {
                                    offset: 1,
                                    color: colorList[params.dataIndex].c2
                                }])
                            }
                        },

                        data: this.opinionData2
                    }
                ]
            })
        },
        drawLine3() {
            this.myChart = this.$echarts.init(document.getElementById('myChart3'))
            this.myChart.setOption({
                title: [
                    {
                        text: '燃气', // 主标题
                        subtext: '已缴', // 副标题
                        x: '45%', // x轴方向对齐方式
                        y: '30%' // y轴方向对齐方式
                    },
                    {
                        text: '80%', // 主标题
                        x: '12%', // x轴方向对齐方式
                        y: '25%', // y轴方向对齐方式
                        textStyle: { // 标题样式
                            fontSize: 36,
                            color: '#1cbbb4'
                        },
                    },
                    {
                        text: '3844人',
                        x: '45%', // x轴方向对齐方式
                        y: '48%', // y轴方向对齐方式
                        textStyle: { // 标题样式
                            fontSize: 22,
                            color: '#1cbbb4'
                        },
                    }
                ],

                tooltip: {
                    formatter: '{a} <br/>{b} : {d}%'
                },
                series: [
                    {
                        name: '自来水',
                        type: 'pie',
                        radius: ['40%', '50%'],
                        center: ['19%', '32%'],
                        itemStyle: {
                            color: function (params) {
                                var colorList = [
                                    {
                                        c1: '#1cbbb4',
                                        c2: '#0081ff'
                                    },
                                    {
                                        c1: '#ddd',
                                        c2: '#ddd'
                                    },]
                                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ //颜色渐变函数 4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
                                    offset: 0,
                                    color: colorList[params.dataIndex].c1
                                }, {
                                    offset: 1,
                                    color: colorList[params.dataIndex].c2
                                }])
                            }
                        },

                        data: this.opinionData3
                    }
                ]
            })
        }
    }
}
</script>

  
<style>
.el-card__body__box1 {
    border-radius: 3px;
    margin-top: -361px;
    float: right;
}
</style>